<template>
  <div class="box">
    <RouterLink v-for="item in nav" :key="item.id" :to="item.url" :path="path">
        <img v-if="!item.isOrange" :src="item.img" alt="">
         <img v-if="item.isOrange" :src="item.activeImg" alt="">
            <p>{{item.text}}</p>
    </RouterLink>

  </div>
</template>

<script setup lang="ts">
import {RouterLink,useRoute} from 'vue-router'
const nav=[
    {
        id:1,
        text:'智能检测',
        img:'/src/assets/images/zhineng.jpg',
        activeImg:'/src/assets/images/zhineng-active.jpg',
        isOrange:false,
        url:'/'
    },
    {
        id:2,
         text:'就业态势',
        img:'/src/assets/images/employment.jpg',
        activeImg:'/src/assets/images/employment-active.jpg',
        isOrange:false,
        url:'/about'
    },
    {
        id:3,
         text:'安防管理',
        img:'/src/assets/images/security.jpg',
        activeImg:'/src/assets/images/security-active.jpg',
        isOrange:false,
        url:'/security'  
    },
    {
        id:4,
        text:'设备运维',
        img:'/src/assets/images/employment.jpg',
        activeImg:'/src/assets/images/employment-active.jpg',
        isOrange:false,
        url:'/device'  
    }
]
const {path}=useRoute()
let obj=nav.find(item=>item.url===path)
obj.isOrange=true
</script>

<style scoped lang="scss">
.box{
 background-image:url('../assets/images/nav.png') !important;
 background-size: 100% 100%;
 display: flex;
 justify-content: center;
 text-align: center;

a{
    margin: 0 6px;
    img{
        width: 40px;
        height: 40px;
    }
    p{
        padding: 0;
        margin: 0;
        color: #fff;
        text-align: center;
        font-size: 12px;
    }
}


}
</style>